<template>
	<view class="contain">
		<view class="search">
			<view class="input">
				<u--input placeholder="搜索课程名或任课老师" shape="circle" prefixIcon="search" placeholderStyle="color:#aaa;"
					prefixIconStyle="" v-model="value" color="#fff" @confirm="search" prefixIconStyle="color:#fff">
				</u--input>
			</view>
			<!-- <view class="bottom">
				<navigator url="/pages/teacher/open" hover-class="navigator-hover">
					<button type="default" class="btn">
						开设选课
					</button>
				</navigator>
				<navigator url="/pages/teacher/add">
					<button type="default" class="btn">
						添加课程
					</button>
				</navigator>
			</view> -->


		</view>
		<view class="main">
			<scroll-view class="list" scroll-y="true">
				<view class="items" v-show="item.isShow" v-for="(item,index) in selects">

					<view class="time">
						<view class="start">
							开始：{{item.start_time.replace("T"," ")}}
						</view>
						<view class="end">
							结束：{{item.end_time.replace("T"," ")}}
						</view>
					</view>
					<u-swipe-action>
						<u-swipe-action-item :options="options" @click="dele(index)">
							<view class="info">
								<view class="coursename">
									{{item.course.name}}
								</view>

								<view class="teachername">
									{{item.teacher}}
								</view>
								<view class="number">
									剩余{{item.max_num-item.num}}人
								</view>
							</view>
							<view class="info2">
								<view class="category">
									{{item.course.category}}

								</view>
								<view class="credit">
									学分：{{item.course.credit}}
								</view>
								<view class="hour">
									总学时：{{item.course.total_hours}}
								</view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>

				</view>
			</scroll-view>
		</view>
	</view>


	</view>

</template>

<script>
	import api from '@/api/index.js'; // 引入api

	export default {
		data() {
			return {
				value: "",
				selects: "",
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			};
		},
		methods: {
			search() {
				let token = uni.getStorageSync("token")
				api.searchSelect(token, this.value).then((res) => {
					this.selects = res.data
					for (let i = 0; i < this.selects.length; i++) {
						this.$set(this.selects[i], "isShow", true)
					}

				}).catch((err) => {
					console.log(err)
				})
			},
			dele(index) {
				let token = uni.getStorageSync("token")
				let id = this.selects[index].id;
				api.deleSelect(token, id).then((res) => {
					if (res.code === 1) {
						this.selects[index].isShow = false
					} else if (res.code === 0) {
						uni.showModal({
							content: res.errors
						})
					}


				}).catch((err) => {
					console.log(err)
				})
			}
		},
		onLoad() {

			let token = uni.getStorageSync("token")

			api.getSelectClass(token).then((res) => {
				if (res.code === 1) {
					this.selects = res.data
					for (let i = 0; i < this.selects.length; i++) {
						this.$set(this.selects[i], "isShow", true)
					}
				} else if (res.code === 0) {
					uni.showModal({
						content: res.errors
					})
				}

			}).catch((err) => {
				console.log(err)
			})
		}
	}
</script>

<style lang="less">
	.contain {
		height: 100%;

		.search {
			background-color: #a62618;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;

			.input {
				height: 30px;
				margin: 30px;
			}

			.bottom {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

				.btn {
					height: 40px;
					width: 190rpx;
					font-size: 15px;
					text-align: center;
					margin: 0px;
					line-height: 40px;
					color: white;
					background-color: #a62618;
					border: white 1px solid;
				}

				margin-bottom: 20px;
			}



		}

		.search::before {
			content: '';
			display: table;
		}


		.main {
			height: 100%;

			.list {
				// background-color: black;
				height: 100%;
				// margin-top: 12px;
				font-size: 10px;

				.items {
					// margin-bottom: 20px;
					background-color: #000;

					.time {
						background-color: black;
						height: 40px;
						line-height: 40px;
						background-color: #E5E5E5;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 8px;

						.start {
							width: 350rpx;

						}

						.end {
							width: 350rpx;
							color: red;
						}
					}

					.info {
						font-weight: bold;
						height: 50px;
						// line-height: 80px;
						background-color: #F4F4F5;
						display: flex;
						align-items: center;
						justify-content: space-around;

						.coursename {
							width: 480rpx;
						}

						.teachername {
							width: 150rpx;
						}

						.number {
							width: 100rpx;
							color: #767A82;
						}

					}

					.info2 {
						font-weight: bold;
						height: 20px;
						// line-height: 80px;
						font-size: 10px;
						background-color: white;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 0 20rpx;

						.category {
							width: 200rpx;
						}

						.credit {
							width: 120rpx;
						}

						.hour {
							hour: 100rpx;
						}
					}
				}
			}
		}



	}
</style>
